<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
    {{msg}}
    <div v-for="item in list">
        <div v-if="item.author == '毛泽东'"
             :class="['active','add','more', {'author':item.age<32}]"
             :style="styleMsg">
            {{item.author}}
        </div>
        <div v-show="item.author=='苏东坡'">
            {{item.author}}
        </div>
        {{item.name}}
    </div>
</div>

</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'独立寒秋湘江北去橘子洲头!',
            styleMsg:{
                color:'red',
                textShadow:'0 0 5px #123244',
            },
            list:[
                {
                    name:'沁园春·长沙',
                    author:'毛泽东',
                    age:29,
                }
                ,{
                    name:'念奴娇·赤壁怀古',
                    author:'苏东坡',
                }
                ,{
                    name:'永遇乐·京口北固亭怀古',
                    author:'辛弃疾',
                }
            ]
        }
    })
</script>
</html>